<template>
  <div>
    <ul>
      <li v-for="item in renderList" :key="item.id" @click="fn(item.id)">
        <h4>{{ item.uname }} --组件的ID为 {{ item.id }}</h4>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      renderList: [
        {
          id: 1,
          uname: '哈哈',
        },
        {
          id: 2,
          uname: '嘻嘻',
        },
        {
          id: 3,
          uname: '嘿嘿',
        },
        {
          id: 4,
          uname: '呵呵',
        },
        {
          id: 5,
          uname: '桀桀',
        },
      ],
    }
  },

  methods: {
    fn(id) {
      this.$router.push({ name: 'detail', query: { id } }, () => {})
    },
  },
}
</script>

<style scoped>
li {
  list-style: none;
  margin-bottom: 20px;
  padding-left: 20px;
  border: 2px solid #333;
}
</style>
